<template>
<div>
<el-dialog
    title="新增彩票"
    :visible.sync="addGames"
    width="50%"
    :before-close="handleClose">
    <el-form :model='gameImg' :rules='rules' ref="gameImg" accept='image/*'>
        <table>
        <tr>
            <td>彩票英文名</td>
            <td>
                <el-form-item prop='en'>
                    <el-input v-model="gameImg.en"></el-input>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>彩票中文名</td>
            <td>
                <el-form-item prop='cn'>
                    <el-input v-model="gameImg.cn"></el-input>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>icons</td>
            <td style="display:flex;">
                <el-form-item prop='imgInp'>
                    <label id="imgbox" ref="imgInp" for="imgInp" >
                        <i class="fa fal fa-plus"></i>
                    </label>
                    <input type="file" id="imgInp" name="icons" @change="pushToImg(40,40,$event)"/>
                </el-form-item>
                <span>请上传40x40大小的图片</span>
            </td>
        </tr>
        <tr>
            <td>icons</td>
            <td>
                <el-form-item prop='bigimgInp'>
                    <label id="imgbox" style="width:90px;height:90px;line-height:90px" 
                    ref="bigimgInp" for="bigimgInp">
                        <i class="fa fal fa-plus"></i>
                    </label>
                    <input type="file" id="bigimgInp" name="icons" @change="pushToImg(90,90,$event)"/>
                </el-form-item>
            </td>
        </tr>

        </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addImg">确 定</el-button>
    </span>
    
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
    props:['addGames'],
    data(){
        return{
            dialogVisible: false,
            updatafile:[],
            gameImg:{imgInp:'',bigimgInp:''},
            rules:{
                en:[

                ],
                cn:[

                ],
                imgInp:[

                ],
                bigimgInp:[

                ]
            }
        }
    },
    computed:{
        games(){
            return this.$store.getter.allgames
        }
    },
    methods:{
        handleClose(){
            this.$parent.addGames = false;
            var imgInp = this.$refs.imgInp;
            var bigimgInp = this.$refs.bigimgInp;
            this.updatafile = [],
            imgInp.innerHTML ='<i class="fa fal fa-plus"></i>',
            bigimgInp.innerHTML ='<i class="fa fal fa-plus"></i>'
          
        },
        addImg(){
           this.$refs['gameImg'].validate((valid) => {
            if (valid) {
                // // 提交新权限
                // this.newroleInfos.parentid = this.parentid;
                var fd = new FormData();
                for(var i=0;i<this.updatafile.length;i++){
                    fd.append('file',this.updatafile[i]);
                }
                fd.append("en",this.gameImg.en);
                fd.append('cn',this.gameImg.cn);
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                }
                axios.post(this.$apis.addgames,fd,config)
                .then((resp)=>{
                    console.log(resp)
                    this.$message({
                        message:resp.data.message,
                        type:resp.data.success?"success":"danger"
                    });
                    if(resp.data.success){
                        this.handleClose();
                        this.$store.dispatch('loadgames')
                    }
                        

                }).catch((error)=>{
                    console.log(error);
                })
            } else {
                console.log('还有未验证通过的');
                return false;
                }
            });
        },
        pushToImg(width,height,event){
            var ev = event || window.event;
            let file = ev.target.files[0];
            var url = this.getObjectURL(file);
            var image = new Image();
            image.src = url;
            // console.log(image)
            image.onload = () =>{
                if(image.width!=width || image.height!=height){
                    alert(`请上传尺寸为宽${width}，高${height}的图片`);
                }else{
                    if(width == 40){
                        this.updatafile.push(file);
                        var imgInp = this.$refs.imgInp;
                        imgInp.innerHTML = image.outerHTML;
                        this.gameImg.imgInp = true;
                    }
                    if(width == 90){
                        this.updatafile.push(file);
                        var bigimgInp = this.$refs.bigimgInp;
                        bigimgInp.innerHTML = image.outerHTML;
                        this.gameImg.bigimgInp = true;
                    }
                }
            }
        },
        getObjectURL(file) { 
        　　var url = null ; 
        　　if (window.createObjectURL!=undefined) { 
        　　　　url = window.createObjectURL(file) ; 
        　　} else if (window.URL!=undefined) { 
        　　　　url = window.URL.createObjectURL(file) ; 
        　　} else if (window.webkitURL!=undefined) { 
        　　　　url = window.webkitURL.createObjectURL(file) ; 
        　　} 
        　　return url ; 
        }
    }
}
</script>
<style lang="scss" scoped>
div /deep/ .el-dialog__header{
    text-align: left;
}
table{
    width: 80%;
    border: 1px solid #cccccc;
    margin: auto;
    tr{
        width: 100%;
        height: 50px;
        border-bottom:1px solid #cccccc;
        &:hover{
            background:rgba(225, 246, 252, 0.5);
        }
        td{
            line-height: 50px;
            border-right: 1px solid #cccccc;
            #imgbox {
                width:40px;
                height:40px;
                border:1px dotted #222020; 
                display:block;
                border-radius: 10px;
                margin: 10px;
                box-sizing: border-box
            }
        } 
    }
}
#imgInp,#bigimgInp{
    display:none;
}

</style>
